<template>
	<!-- 面试详情 -->
	<view class="job-records-details">
		<view class="jrd-box">
			<view class="jrd-user">
				<image src="https://web.suqzp.com/public/v10.png" class="user-logo" mode="aspectFill"></image>
				<view class="flex-1 mar-left-25 mar-right-25">
					<view class="fs-36">腾讯滨海科技有限公司</view>
					<view class="mar-top-15 fc-66 fs-28">为融资 · 0-20人· 计算机软件</view>
				</view>
				<image src="https://web.suqzp.com/public/nr.png" class="user-lian" mode="widthFix"></image>
				<image src="https://web.suqzp.com/public/nr.png" @click="phoneClick" class="user-phone mar-left-35"
					mode="widthFix"></image>
			</view>

			<view class="jrd-info">
				<view class="jrd-item">
					<view class="left">面试时间</view>
					<view class="right">2021-08-21 12:00</view>
				</view>
				<view class="jrd-item">
					<view class="left">面试职位</view>
					<view class="right">产品经理</view>
				</view>
				<view class="jrd-item">
					<view class="left">职位薪资</view>
					<view class="right">6-8K</view>
				</view>
				<view class="jrd-item">
					<view class="left">联系人</view>
					<view class="right">王爱-13746483192</view>
				</view>
				<view class="jrd-item">
					<view class="left">面试地址</view>
					<view class="right">深圳市南山科技园腾讯滨海大l厦39楼1003号</view>
				</view>
			</view>
			
			<view class="jrd-nav">
				<text>导航</text>
			</view>

			<view :class="['text-tc jrd-state', status == 1 ? 'uc-w' : status == 2?'uc-o': 'uc-c']">
				<view class="fs-36">{{status == 1 ? '待面试' : status == 2?'已超时': '已完成'}}</view>
				<view class="fs-26 mar-top-15" v-if="status==1">（距离面试开始时间还有{{times}}）</view>
				<view class="fs-26 mar-top-15" v-else-if="status==2">（超时30分钟）</view>
				<view class="fs-36 mar-top-15" v-else>（2021-08-21 12:00）</view>
				<!-- <view class="fs-26 mar-top-15" v-if="times == '已截止'">（{{times}}）</view> -->
			</view>
			
			<!-- <view class="jrd-btns">
				<view class="jrd-btn chong">重新邀约</view>
				<view class="jrd-btn bian">编辑备注</view>
			</view> -->
			

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				id: '',
				status: 0,

				times: '2小时05分钟10秒',
				timeId: null,
			};
		},
		onLoad(query){
			console.log('query',query)
			this.status = query.status
		},
		methods: {
			phoneClick() {
				uni.makePhoneCall({
					phoneNumber: '13695265235',
					success: () => {},
					fail: () => {},
				})
			},
			// 天 时 分 秒 格式化函数
			countTime() {
				this.timeId = setInterval(() => {
					let date = new Date();
					let now = date.getTime();
					let endDate = new Date("2022-6-09 18:34:00"); //设置截止时间
					let end = endDate.getTime();
					let leftTime = end - now; //时间差
					let d, h, m, s, ms;
					if (leftTime > 0) {
						d = Math.floor(leftTime / 1000 / 60 / 60 / 24);
						h = Math.floor(leftTime / 1000 / 60 / 60 % 24);
						m = Math.floor(leftTime / 1000 / 60 % 60);
						s = Math.floor(leftTime / 1000 % 60);
						if (s < 10) s = "0" + s
						if (m < 10) m = "0" + m
						if (h < 10) h = "0" + h
					} else {
						this.times = '已截止'
						clearInterval(this.timeId)
						return
					}
					//将倒计时赋值到div中
					this.times = d > 0 ? ( d + "天" ) : '' + h + "时" +  m + "分" + s + "秒"
				}, 1000);
			},
		},
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.job-records-details {
		padding: 32rpx;
		word-break: break-all;

		.jrd-box {
			padding: 40rpx 26rpx;
			background: linear-gradient(-151deg, #D4E9FB 0%, #FEFFFF 30%, #FFFFFF 70%);
			border-radius: 12rpx;

			.jrd-user {
				display: flex;
				align-items: center;

				.user-logo {
					width: 96rpx;
					height: 96rpx;
					border-radius: 50%;
				}

				.user-lian {
					width: 33rpx;
					height: 29rpx;
				}

				.user-phone {
					width: 27rpx;
					height: 27rpx;
				}
			}

			.jrd-info {
				margin-top: 40rpx;

				.jrd-item {
					width: 100%;
					// display: flex;
					// align-items: center;
					margin-bottom: 34rpx;
					color: #333333;

					.left {
						display: inline-block;
						width: 110rpx;
						margin-right: 26rpx;
						font-size: 26rpx;
						font-weight: 400;
						vertical-align: text-top;
						padding-top: 6rpx;
					}

					.right {
						display: inline-block;
						width: calc(100% - 136rpx);
						font-size: 32rpx;
						font-weight: 500;
						vertical-align: text-top;
					}
				}
			}
			
			.jrd-nav {
				display: inline-block;
				width: 136rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				color: #FFFFFF;
				background-color: #8EC7F9;
				border-radius: 50rpx;
				float: right;
				position: relative;
				right: 30rpx;
				top: -40rpx;
				
				&::before,&::after{
					content: '';
					clear: both;
				}
			}

			.jrd-state {
				padding-top: 128rpx;
			}

			.uc-w {
				color: #40C228;
			}

			.uc-o {
				color: #F87171;
			}

			.uc-c {
				color: #5DA9EB;
			}
			
			.jrd-btns {
				margin-top: 150rpx;
				
				.jrd-btn {
					margin: 40rpx auto;
					width: 592rpx;
					height: 88rpx;
					line-height: 88rpx;
					text-align: center;
					border-radius: 8rpx;
				}
				
				.chong {
					color: #52C83D;
					border: 1px solid #52C83D;
				}
				
				.chong {
					color: #52C83D;
					border: 1px solid #52C83D;
				}
				
				.bian {
					color: #8EC7F9;
					border: 1px solid #8EC7F9;
				}
			}
			
		}
	}
</style>
